<template>
  <section>
    <!-- <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav> -->
    <section
      class="flex flex-center"
      :style="{
        width: '100vw',
        height: '66px',
      }"
    >
      <section class="index-top-navbar">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="home">主页</el-menu-item>
          <el-sub-menu index="2">
            <template #title>Workspace</template>
            <el-menu-item index="2-1">item one</el-menu-item>
            <el-menu-item index="2-2">item two</el-menu-item>
            <el-menu-item index="2-3">item three</el-menu-item>
            <el-sub-menu index="2-4">
              <template #title>item four</template>
              <el-menu-item index="2-4-1">item one</el-menu-item>
              <el-menu-item index="2-4-2">item two</el-menu-item>
              <el-menu-item index="2-4-3">item three</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-menu-item index="3" disabled>Info</el-menu-item>
          <el-menu-item index="/temp/home">临时考试</el-menu-item>
        </el-menu>
      </section>
    </section>
    <section>
      <router-view />
    </section>
  </section>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// import { ElMenuItem, ElSubMenu, ElMenu } from 'element-plus';
const router = useRouter();
const route = useRoute();
const activeIndex = computed(() => {
  return route.path;
});
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
  switch (key) {
    case '/temp/home':
      router.push(key);
      break;
  }
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

.index-top-navbar {
  width: 80vw;
  min-width: 400px;
}
</style>
